<template>
<div class='page-container'>
  <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">
      <table class="common-table" cellspacing="0" width="100%">
        <tr>
          <td class="required" width="10%">名称</td>
          <td colspan="3">
            <el-input v-model.trim="form.name" name="name" v-validate="{ required: checkRequired, length: 16, lettersAndNumbers: true }" data-vv-scope="first"></el-input>
            <span v-if="errors.has('name', 'first')" class="danger-tips">{{ errors.first('name', 'first') }}</span>
          </td>
        </tr>
      </table>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      <table class="common-table" cellspacing="0" width="100%">
        <tr>
          <td class="required" width="15%">分类</td>
          <td>
            <el-select v-model="form.type" v-validate="{ required: checkRequired }" name="type" data-vv-scope="second">
              <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <span v-if="errors.has('type', 'second')" class="danger-tips">{{ errors.first('type', 'second') }}</span>
          </td>
        </tr>
      </table>
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="third">
      <table class="common-table" cellspacing="0" width="100%">
        <tr>
          <td class="required" width="10%">年份</td>
          <td>
            <el-date-picker v-model="form.year" v-validate="{ required: checkRequired }" type="date" name="year" value-format="timestamp" data-vv-scope="third"></el-date-picker>
            <span v-if="errors.has('year', 'third')" class="danger-tips">{{ errors.first('year', 'third') }}</span>
          </td>
        </tr>
      </table>
    </el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">
      <table class="common-table" cellspacing="0" width="100%">
        <tr>
          <td class="required" width="10%">选项</td>
          <td>
            <el-checkbox v-model="form.checkbox" name="checkbox" v-validate="{ required: checkRequired }" data-vv-scope="fourth">备选项</el-checkbox>
            <span v-if="errors.has('checkbox', 'fourth')" class="danger-tips">{{ errors.first('checkbox', 'fourth') }}</span>
          </td>
        </tr>
      </table>
    </el-tab-pane>
    <el-tab-pane label="附件上传" name="fifth">
      <table class="common-table" cellspacing="0" width="100%">
        <tr>
          <td class="required" width="10%">添加附件</td>
          <td colspan="3">
            <el-upload action="/upload" :on-change="uploadFile" name="fileList" v-validate="{ required: checkRequired }" v-model="form.fileList" :before-remove="removeFile" accept=".jpg,.jpeg,.png*,.pdf" :show-file-list="true" :file-list="form.fileList" list-type="picture" :auto-upload="false" data-vv-scope="fifth">
              <el-button>添加附件</el-button>
            </el-upload>
            <span v-if="errors.has('fileList', 'fifth')" class="danger-tips">{{ errors.first('fileList', 'fifth') }}</span>
          </td>
        </tr>
      </table>
    </el-tab-pane>

    <footer>
      <el-button type="primary" @click.stop="save">保存</el-button>
    </footer>
  </el-tabs>

  <div>参考地址：https://www.cnblogs.com/gongcaiwen/p/9814845.html</div>
</div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      activeName: "first",
      checkRequired: false,
      form: {
        name: "",
        fileList: [],
        year: "",
        type: "",
        checkbox: ""
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  //方法集合
  methods: {
    // 保存
    save() {
      this.checkRequired = true;
      this.$nextTick(async () => {
        try {
          const flag = await this.firstValidate();
          if (flag) {
            setTimeout(() => {
              this.$alert("校验通过，保存数据成功！！！");
            });
          }
        } catch (error) {}
      });
    },
    // 第一个标签页校验
    firstValidate() {
      return new Promise((resolve, reject) => {
        this.$validator.validate("first.*").then(res => {
          if (!res) {
            this.activeName = "first";
            this.$nextTick(() => {
              let field = this.errors.items.slice(-1)[0].field;
              $(":input[name=" + field + "]").focus();
            });
            this.$message({
              type: "error",
              message: "表单输入有误，请重新填写！！！"
            });
            resolve(false);
          } else {
            resolve(this.secondValidate());
          }
        });
      });
    },
    // 第二个标签页校验
    secondValidate() {
      return new Promise((resolve, reject) => {
        this.$validator.validate("second.*").then(res => {
          if (!res) {
            this.activeName = "second";
            this.$nextTick(() => {
              let field = this.errors.items.slice(-1)[0].field;
              $(":input[name=" + field + "]").focus();
            });
            this.$message({
              type: "error",
              message: "表单输入有误，请重新填写！！！"
            });
            resolve(false);
          } else {
            resolve(this.thirdValidate());
          }
        });
      });
    },
    // 第三个标签页校验
    thirdValidate() {
      return new Promise((resolve, reject) => {
        this.$validator.validate("third.*").then(res => {
          if (!res) {
            this.activeName = "third";
            this.$nextTick(() => {
              let field = this.errors.items.slice(-1)[0].field;
              $(":input[name=" + field + "]").focus();
            });
            this.$message({
              type: "error",
              message: "表单输入有误，请重新填写！！！"
            });
            resolve(false);
          } else {
            resolve(this.fourthValidate());
          }
        });
      });
    },
    // 第四个标签页校验
    fourthValidate() {
      return new Promise((resolve, reject) => {
        this.$validator.validate("fourth.*").then(res => {
          if (!res) {
            this.activeName = "fourth";
            this.$nextTick(() => {
              let field = this.errors.items.slice(-1)[0].field;
              $(":input[name=" + field + "]").focus();
            });
            this.$message({
              type: "error",
              message: "表单输入有误，请重新填写！！！"
            });
            resolve(false);
          } else {
            resolve(this.fifthValidate());
          }
        });
      });
    },
    // 第五个标签页校验
    fifthValidate() {
      return new Promise((resolve, reject) => {
        this.$validator.validate("fifth.*").then(res => {
          if (!res) {
            this.activeName = "fifth";
            this.$nextTick(() => {
              let field = this.errors.items.slice(-1)[0].field;
              $(":input[name=" + field + "]").focus();
            });
            this.$message({
              type: "error",
              message: "表单输入有误，请重新填写！！！"
            });
            resolve(false);
          } else {
            resolve(true);
          }
        });
      });
    },
    // 附件上传
    uploadFile(file, fileList) {
      const fitFormat =
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpeg" ||
        file.raw.type === "application/pdf";
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!fitFormat) {
        fileList.splice(-1, 1);
        this.$message.error("附件只能为JPG/PNG/PDF格式！");
        return;
      }
      if (!isLt2M) {
        fileList.splice(-1, 1);
        this.$message.error("附件大小不能超过50MB！");
        return;
      }
      this.form.fileList = { url: file.url, file: file, name: file.name };
    },
    // 移除附件
    removeFile(file, fileList) {
      this.form.fileList = [];
    }
  }
};
</script>

<style lang='scss' scoped>
footer {
  text-align: center;
  margin-top: 15px;
}
</style>
